<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title=""
               :modal="false"
               width="60%"
               class="user-dialog add-or-updata"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <table-template v-if="dataForm.dockingMethod === 1"
                      :tableData='tableData'
                      :loading='dataListLoading'
                      :dataList='dataList1'
                      class="minh">
      </table-template>
      <table-template v-if="dataForm.dockingMethod === 2"
                      :tableData='tableData1'
                      :loading='dataListLoading'
                      :dataList='dataList1'
                      class="minh">
      </table-template>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataInfoURL: '/tb/devicePolling/deviceBymultiple?id=' // 数据详情，API地址
      },
      visible: false,
      dataForm: {},
      dataList1: []
    }
  },
  components: {
    tableTemplate
  },
  computed: {
    tableData () {
      return [
        { label: '设备ID', width: '120', prop: 'deviceId' },
        { label: '设备名称', width: '120', prop: 'name' },
        { label: '所在位置', width: '120', prop: 'areaName' },
        { label: '逻辑ID', width: '120', prop: 'logicId' }
      ]
    },
    tableData1 () {
      return [
        { label: '设备ID', width: '120', prop: 'deviceId' },
        { label: '设备名称', width: '120', prop: 'name' },
        { label: '所在位置', width: '120', prop: 'areaName' },
        { label: '数据标识', width: '120', prop: 'dataIdentification' }
      ]
    }
  },
  methods: {
    init (data) {
      this.dataForm.id = data.id
      this.dataForm = data
      this.visible = true
      this.$nextTick(() => {
        this.$http.get('tb/devicePolling/queryDeviceList?id=' + this.dataForm.id).then(({ data: res }) => {
          if (res.code !== 0) {
            return
          }
          this.dataList1 = res.data
        })
      })
    },
    closeDialog () {
      this.visible = false
      this.dataList1 = []
    }
  }
}
</script>

<style lang="scss" scoped>
.minh {
  max-height: 550px !important;
  overflow: auto;
}
.frequency1 {
  ::deep.el-form-item__label {
    width: 60px !important;
  }

  ::deep.el-form-item__content {
    margin-left: 60px !important;
  }
}

.time {
  ::deep.el-form-item__label {
    width: 10px !important;
  }

  ::deep.el-form-item__content {
    margin-left: 10px !important;
  }
}
</style>
